<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			.active {
				width: 200px;
				height: 200px;
				background-color: orange;
				margin-top: 5px;
			}

			.text-danger {
				color: green;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<!-- 
		     固有属性:
		       1.一般属性
			   2.样式属性
			   2.1对象语法
			 自定义属性
		 -->
		<div id="app">
			<button @click="fn">改变属性</button>
			<a v-bind:href="url">学掌门</a>
			<input type="text" :name="uname" />
			<div :class="{active:isActive}">对象语法</div>
			<!-- <div class="active">对象语法</div> -->
			<div :class="[activClass,dangerClass]">数组语法</div>
			<!-- <div class="active text-danger">数组语法</div> -->
			<!-- <div style="color: greenyellow; font-size:30px;background-color: cadetblue;">内联样式</div> -->
			<div :style="{color:color,fontSize:fontSize,backgroundColor:backgroundColor}">内联样式</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					url: 'https://www.jd.com',
					uname: 'u1',
					isActive: true,
					activClass: 'active',
					dangerClass: 'text-danger',
					color: 'greenyellow',
					fontSize: '30px',
					backgroundColor: 'cadetblue'
				},
				methods: {
					fn() {
						console.log("dfasfdsf");
						this.url = 'https://www.atstudy.com';
						this.uname = 'u2';
						this.isActive = false

					}
				}

			})
		</script>
	</body>
</html>
